<template>
  <view class="stage-setting">
    <nav-bar left-text="驿站设置" />
    <bg-set background="#f2f3f7" />
    <scroll-view
      scroll-y="true"
      class="scroll-y"
      @scrolltolower="scrolltolower"
    >
      <view>
        <template v-if="loading">
          <loading />
        </template>
        <template v-else-if="!loading && listData.length >= 1">
          <stage-card
            v-for="(item, index) in listData"
            :key="item.stageName"
            :stage-card-data="item"
            :class="[index === pressIndex ? 'long-press' : '']"
            @longpress="longpress(item, index)"
          />
        </template>
        <template v-else-if="!loading && listData.length === 0 && success">
          <loading-empty
            tip="没有驿站可以选择,快去创建吧~"
            buttonText="创建驿站"
            url="/pages/profile/stageSetting/stage-new-built"
          />
        </template>
        <template v-else-if="!loading && listData.length === 0 && !success"
          ><loading-error />
        </template>
        <scroll-view-holder />
      </view>
    </scroll-view>
    <view class="stage-setting__footer f jc-c ai-c">
      <van-button type="primary" round style="width: 80%" @click="makeStage"
        >创建驿站</van-button
      >
    </view>
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        type="warn"
        mode="base"
        title="确定要删除选中驿站吗"
        content="点击确定将删除选中驿站"
        :before-close="true"
        @close="closePopup"
        @confirm="confirm"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import StageCard from "./components/stage-card";
import profileAPI from "/api/modules/profile";
import storageOperation from "/utils/index";
export default {
  name: "stage-setting",
  components: { StageCard },
  data() {
    return {
      loading: false,
      success: true,
      listData: [],
      pressData: null,
      pressIndex: "",
    };
  },
  onShow() {
    setTimeout(() => {
      this.doRequest();
    }, 10);
  },
  methods: {
    scrolltolower() {
      uni.showToast({
        title: "我可是有底线的哈",
        duration: 2000,
        icon: "none",
        position: "top",
      });
    },
    doRequest() {
      this.loading = true;
      this.success = true;
      this.listData = [];
      const userName = storageOperation.getStorageSync("userName").value;
      profileAPI
        .getStage({ userName })
        .then((res) => {
          this.listData = res;
        })
        .catch((err) => {
          this.success = false;
          uni.showToast({
            title: "获取驿站列表失败",
            icon: "error",
            duration: 1000,
            position: "top",
          });
          console.log(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    makeStage() {
      uni.navigateTo({
        url: "/pages/profile/stageSetting/stage-new-built",
      });
    },
    longpress(data, index) {
      this.pressIndex = index;
      this.pressData = data;
      this.$refs.popup.open();
    },
    closePopup() {
      this.pressIndex = "";
      this.$refs.popup.close();
    },
    confirm() {
      this.closePopup();
      const userName = storageOperation.getStorageSync("userName").value;
      const { stageName, address } = this.pressData;
      const params = { userName, stageName, address };
      profileAPI
        .deleteStage(params)
        .then((res) => {
          console.log(res);
          uni.showToast({
            title: "删除选中驿站成功",
            icon: "success",
            duration: 1000,
            positions: "top",
          });
          this.doRequest();
        })
        .catch((err) => {
          console.log(err);
          uni.showToast({
            title: "删除选中驿站失败",
            icon: "error",
            durations: 1000,
            position: "top",
          });
        });
    },
  },
};
</script>
<style lang='scss' scoped>
.stage-setting {
  position: fixed;
  width: 100%;
  height: 100vh;
  .scroll-y {
    padding: 20rpx;
    width: 100%;
    height: calc(100vh - 44rpx);
    box-sizing: border-box;
    .long-press {
      background: #e3e9fb;
    }
  }
  &__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 160rpx;
    background-color: #fff;
    box-shadow: 0 -2px 4px #eee;
  }
}
</style>